<script setup>
import {FAside, FDrawer, FLayout, FMain, FMenu, FPagination, FSpace, FTable} from '@fesjs/fes-design';
import {reactive, ref} from "vue";

defineProps({
  menu: [],
  columns: [],
  tableData: [],
  pageTotalCount: 100,
  detailContent: ''
})
const emit = defineEmits(['selectMenu', 'pageChange', 'openDetail'])
const currentPage = defineModel("currentPage")
const pageSize = defineModel("pageSize")
const showDetail = defineModel("showDetail")
let _currentItem;

function selectMenu(menu) {
  _currentItem = menu.value;
  emit('selectMenu', menu)
}

function openDetail() {
  emit('openDetail', _currentItem)
}

function pageChange(currentPage, pageSize) {
  emit('pageChange', currentPage, pageSize, _currentItem);
}

const pageSizeOption = reactive([10, 20, 30, 50, 100]);
const layout = ref('fixed');
const hoverable = ref(true);
const striped = ref(true);

</script>

<template>
  <FLayout containerStyle="height: 100%;">
    <FAside>
      <FMenu mode="vertical" :options="menu" @select="selectMenu"></FMenu>

    </FAside>
    <FMain style="overflow: hidden">
      <FGrid>
        <FGridItem span="21">
          <FTable
              bordered="true"
              size="small"
              verticalLine
              :data="tableData"
              :layout="layout"
              :hoverable="hoverable"
              :columns="columns"
              :striped="striped">
          </FTable>
        </FGridItem>
      </FGrid>
      <FGrid>
        <FGridItem span="21">
          <FSpace justify="end" style="padding-top: 1em">
            <FPagination
                v-model:currentPage="currentPage"
                v-model:pageSize="pageSize"
                :total-count="pageTotalCount"
                show-size-changer
                :pageSizeOption="pageSizeOption"
                @change="pageChange"
            />
          </FSpace>
        </FGridItem>
      </FGrid>
    </FMain>
  </FLayout>
  <FDrawer
      v-model:show="showDetail"
      @afterEnter="openDetail"
      title="详情">
    <FSpace vertical>
      <pre>{{detailContent}}</pre>
    </FSpace>
  </FDrawer>
</template>

<style scoped>

</style>